<?php 

	// Informamos el título
	$this->set('title_for_layout','Ficha de '.$especie['Especie']['nombreComun']);
	
	/**
	 * CSS
	 */
	$this->Html->css(array('datatables-bootstrap', '/plugin/jquery-ui-1.10.3/css/redmond/jquery-ui-1.10.3.custom.min', 'galleria.azur'), null, array('inline' => false));
	if(isset($especie['Fotos']) && count($especie['Fotos']) > 0) {
		echo "<style>#galleria{ width: 1230px; height: 600px; background: #000 }</style>";
	}
	
	/**
	 * Javascript
	 */
	$this->Html->script(array('/plugin/DataTables-1.9.4/media/js/jquery.dataTables.min', 'datatables-bootstrap', '/plugin/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min', 'galleria-1.2.9', 'galleria.azur.min', 'aoa_especie_detalle', '/plugin/jquery-validation-1.11.1/dist/jquery.validate.min', '/plugin/jquery-validation-1.11.1/localization/messages_es'), array('inline' => false));
	//$this->Html->scriptBlock($this->AoaTable->obtener_configuracion_datatables("tabla_citas"), array('inline' => false));
	
	$javascriptBlock = '$(document).ready(function(){
					
					$(document).ready(function() {
						$("#tabla_citas").dataTable({
							"sDom": "<\'row\'<\'span9\'l><\'span3\'f>r>t<\'row\'<\'span9\'i><\'span3\'p>>",
							"sWrapper": "dataTables_wrapper form-inline",
							"bPaginate": true,
							"sPaginationType": "bootstrap",
					        "bLengthChange": true,
					        "bFilter": true,
					        "bSort": true,
					        "bInfo": true,
					        "bAutoWidth": false,
					        "oLanguage": {
								"oAria": {
						        	"sSortAscending": "'.__(" - haz click o pulsa enter para ordenar ascendentemente").'",
						        	"sSortDescending": "'.__(" - haz click o pulsa enter para ordenar descendentemente").'"
						      	},
								"oPaginate": {
							       	"sFirst": "'.__("Primera").'",
							       	"sLast": "'.__("Última").'",
							       	"sNext": "'.__("Siguiente").'",
							       	"sPrevious": "'.__("Anterior").'"
							    },
							    "sEmptyTable": "'.__("No hay datos disponibles").'",
							    "sInfo": "'.__("Mostrando (_START_ de _END_) registros de un total de _TOTAL_").'",
							    "sInfoEmpty": "'.__("No hay registros para mostrar").'",
							    "sInfoFiltered": "'.__("- filtrando por _MAX_ registros").'",
							    "sInfoThousands": "\'",
							    "sLengthMenu": "'.__("Mostrar").' <select>"+
							        "<option value=\"10\">10</option>"+
							        "<option value=\"25\">25</option>"+
							        "<option value=\"50\">50</option>"+
							        "<option value=\"-1\">'.__("Todos").'</option>"+
							        "</select> '.__("registros").'",
							    "sLoadingRecords": "'.__("Por favor, espere. Cargando...").'",
							    "sProcessing": "'.__("El servidor está ocupado.").'",
							    "sSearch": "'.__("Buscar").':",
							    "sZeroRecords": "'.__("No hay registros que mostrar.").'"
						    }
						});
					});
				});';
	$this->Html->scriptBlock($javascriptBlock, array('inline' => false));
	
	?>
	
<script type="text/javascript">
<!--
	$(document).ready(function() {

		/**
		 * Generar gráfico
		 */
		$.ajax({
			type: "POST",
			url: "/aoa/especie/generar_grafico/especie_id:<?php echo $especie['Especie']['id'];?>",
			data: $("#frm_estadisticas").serialize(),
			beforeSend: function() {
                $('#div_grafico').html('<div class="rating-flash" id="cargando_div">Cargando  <img src="/aoa/app/webroot/img/gif/cargando_barra_mini.gif"></div>');
			},
          	success: function(msg){
              	$('#div_grafico').html(msg);
          	}
		});
		$("#frm_estadisticas").validate({
			rules : {
				fechaDesde : {
					date : true,
					required : true
				},
				fechaHasta : {
					date : true,
					required : true
				}
			},
			messages : {
				fechaDesde : {
					date : "Por favor, escriba una fecha desde válida",
					required : "La fecha desde es obligatoria"
				},
				fechaHasta : {
					date : "Por favor, escriba una fecha hasta válida",
					required : "La fecha hasta es obligatoria"
				}
			},
			errorContainer: "#errorMessagesGrafico",
			errorLabelContainer : "#errorMessagesGrafico ul",
			wrapper: "li",
			submitHandler: function(form) {
				$.ajax({
					type: "POST",
					url: "/aoa/especie/generar_grafico/especie_id:<?php echo $especie['Especie']['id'];?>",
					data: $("#frm_estadisticas").serialize(),
					beforeSend: function() {
		                $('#div_grafico').html('<div class="rating-flash" id="cargando_div">Cargando  <img src="/aoa/app/webroot/img/gif/cargando_barra_mini.gif"></div>');
					},
		          	success: function(msg){
		              	$('#div_grafico').html(msg);
		          	}
				});
			}
		});
		$.validator.addMethod("anioDesdeMenorAnioHasta", function(value, element) {
			  //If false, the validation fails and the message below is displayed
			  var anioDesde = value;
			  return anioDesde < $('#anioHasta').val();
			  }, "<?php echo "El año desde debe ser menor que el año hasta";?>");
			
		$.validator.addMethod("anioHastaMayorAnioDesde", function(value, element) {
			  //If false, the validation fails and the message below is displayed
			  var anioHasta = value;
			  return anioHasta > $('#anioDesde').val();
			  }, "<?php echo "El año hasta debe ser mayor que el año desde";?>");
		// Fin generar gráfico

		/**
		 * Generar mapa
		 */
		$("#btn_actualizar_mapa").click(function(){
			$.ajax({
				type: "POST",
				url: "/aoa/especie/generar_mapa/especie_id:<?php echo $especie['Especie']['id'];?>",
				data: $("#frm_mapa_distribucion").serialize(),
				beforeSend: function() {
	                $('#div_mapa').html('<div class="rating-flash" id="cargando_div">Cargando  <img src="/aoa/app/webroot/img/gif/cargando_barra_mini.gif"></div>');
				},
	          	success: function(msg){
	              	$('#div_mapa').html(msg);
	          	}
			});
		});
		// Fin generar mapa

		/**
		 * Cargar calendarios
		 */
		$( "#fechaDesde" ).datepicker({
			dateFormat: "dd/mm/yy", 
			monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
			monthNamesShort: [ "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ],
			dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
			yearRange: "<?php echo $anios[count($anios) - 1 ][0]['anio'];?>:<?php echo date("Y");?>",
			changeMonth: true,
			changeYear: true,
			firstDay: 1,
			onClose: function( selectedDate ) {
				$( "#fechaHasta" ).datepicker( "option", "minDate", selectedDate );
			}
		});
		$( "#fechaHasta" ).datepicker({
			dateFormat: "dd/mm/yy", 
			monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
			monthNamesShort: [ "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic" ],
			dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
			yearRange: "<?php echo $anios[count($anios) - 1 ][0]['anio'];?>:<?php echo date("Y");?>",
			changeMonth: true,
			changeYear: true,
			firstDay: 1,
			onClose: function( selectedDate ) {
			 	$( "#fechaDesde" ).datepicker( "option", "maxDate", selectedDate );
			}
		});
		// Fin cargar calendarios
	});
//-->
</script>
	
	<?php 
	
	// Menu
	$this->start('menu');		
	echo $this->element('/menu');
	$this->end(); 
?>

<!-- Cuerpo -->
<div>
    <fieldset>
        <legend><?php echo __('Ficha de la Especie'); ?></legend>
        
        <div class="row-fluid">
        	<div class="span12 contenedor_azul">
        		<h4 class="pull-right"><?php echo __("Número de citas: " ).count($especie['Citas'])?></h4>
        		<h3><?php echo $this->AoaText->primera_letra_mayuscula($especie['Especie']['nombreComun'])." (<em>".$especie['Especie']['genero']." ".$especie['Especie']['especie']."</em>)"; ?></h3>
				<h5 style="margin-bottom: 20px;"><?php echo __("Inglés").": ".$especie['Especie']['nombreIngles'];?></h5>        		
        		<h4><?php echo $especie['Familia']['nombre'];?>, <?php echo $especie['OrdenTaxonomico']['nombre'];?></h4>
        	</div>
        </div>
        <br>
        <div class="row-fluid">
        	<div class="span4">
        		<img alt="<?php echo $especie['Especie']['nombreIngles'];?>" src="/aoa/app/webroot/img/especie/<?php echo $especie['Especie']['id'];?>.jpg" class="img-polaroid" width="360" height="270">
        	</div>
        	<div class="span8">
        		<?php 
        			if(isset($especie['ProteccionLr']['codigo'])) {
        				echo "<p><span class='label ".$this->Especie->obtener_color_proteccion_lr($especie['ProteccionLr']['codigo'])."'>".$especie['ProteccionLr']['nombre']."</span>".__(" según el ")."<em><b>".__("Libro Rojo de las Aves de España")."</b></em></p>";
        			}
        			if(isset($especie['ProteccionClm']['codigo'])) {
        				echo "<p><span class='label ".$this->Especie->obtener_color_proteccion_clm($especie['ProteccionClm']['codigo'])."'>".$especie['ProteccionClm']['nombre']."</span>".__(" en ")."<b>".__("Castilla - La Mancha")."</b></p>";
        			}
        			if(isset($especie['EstatusCuantitativoAb']['nombre'])) {
        				echo "<p><span class='label label-info'>".$especie['EstatusCuantitativoAb']['nombre']."</span>".__(" en ")."<b>".__("Albacete")."</b></p>";
        			}
        		?>
        		<hr>
        		<h5><?php echo __("En la provincia de Albacete...");?></h5>
        		<p><?php echo $especie['Especie']['comentarioHistorico'];?></p>
        	</div>
        </div>
        <br>
		<ul class="nav nav-tabs">
	    	<li class="active"><a data-toggle="tab" href="#citas"><?php echo __("Citas");?></a></li>
	    	<li><a data-toggle="tab" href="#estadisticas"><?php echo __("Estadísticas");?></a></li>
	    	<li><a data-toggle="tab" href="#mapa_distribucion"><?php echo __("Mapa de Distribución");?></a></li>
	    	<li><a data-toggle="tab" href="#fotos"><?php echo __("Fotos");?></a></li>
	    </ul>
	    <div id="especie_tab_content" class="tab-content">
			<div id="fotos" class="tab-pane fade">
				
				<div id="galleria">
					<?php 
						if(isset($especie['Fotos']) && count($especie['Fotos']) > 0) {
							foreach ($especie['Fotos'] as $foto) {
								echo 	'<a href="'.$foto['ruta'].$foto['nombreFisico'].'" class="thumbnail">';
								echo 		'<img src="'.$foto['ruta'].$foto['nombreFisico'].'" alt="'.$foto['descripcion'].'" width="160" height="80" 
												data-big="'.$foto['ruta'].$foto['nombreFisico'].'"
			                    				data-title="Foto realizada por '.$foto['usuario_id'].' en '.$foto['Cita']['lugar_id'].' el '.date_format(date_create($foto['Cita']['fechaAlta']), "d/m/Y").'"
			                    				data-description="'.$foto['descripcion'].'"/>';  
							    echo 	'</a>';
							} 
						}
						else {
							echo "<p>No hay fotos</p>";
						}
					?>
				</div>
				
			</div>
			<div id="citas" class="tab-pane fade active in">
				
				<table id="tabla_citas" class="table table-striped table-bordered table-hover">	
					<thead>
						<tr>
							<th style="text-align: center;"><?php echo __("Ver más");?></th>
							<th style="text-align: center;"><?php echo __("Fotos");?></th>
							<th style="text-align: center;"><?php echo __("Especie");?></th>
							<th style="text-align: center;"><?php echo __("Fecha");?></th>
							<th style="text-align: center;"><?php echo __("Lugar");?></th>
							<th style="text-align: center;"><?php echo __("Número de Aves");?></th>
							<th style="text-align: center;"><?php echo __("Observadores");?></th>
							<th style="text-align: center;"><?php echo __("Clase de Reproducción");?></th>
							<th style="text-align: center;"><?php echo __("Importancia");?></th>
						</tr>
					</thead>
					<tbody>
				<?php 
					foreach ($especie['Citas'] as $cita) {
						echo "<tr>";
						echo 	"<td style='text-align: center;'><a href='/aoa/cita/detalle/id:".$cita['Cita']['id']."' title='".__("Más información")."'><i class='icon-zoom-in'></i></a></td>";
						echo 	"<td style='text-align: center;'><a href='/aoa/cita/fotos?cita_id=".$cita['Cita']['id']."' title='".__("Ver fotos")."'><i class='icon-picture'></i></a></td>";
						echo 	"<td><a href='/aoa/cita/index?especie_id=".$cita['Especie']['id']."' title='".$this->AoaText->primera_letra_mayuscula($cita['Especie']['nombreComun'])."'>".$this->AoaText->primera_letra_mayuscula($cita['Especie']['genero'])." ".$cita['Especie']['especie']." ".$cita['Especie']['subespecie']."</a></td>";
						echo 	"<td class='pagination-centered'><a href='/aoa/cita/index?fecha_alta=".$cita['Cita']['fechaAlta']."'>".date_format(date_create($cita['Cita']['fechaAlta']), "d/m/Y")."</a></td>";
						echo 	"<td><a href='/aoa/cita/index?lugar_id=".$cita['Lugar']['id']."'>".ucwords($cita['Lugar']['nombre'])."</a></td>";
						echo 	"<td><span title='".$this->ClaseEdadSexo->mostrar_detalle_clase_edad_sexo($cita['clases_edad_sexo'])."'>".$cita['Cita']['cantidad']."</span></td>";
						echo 	"<td>".$this->Observador->mostrar_codigos_observadores($cita['observadores'])."</td>";
						echo 	"<td><a href='/aoa/cita/index?clase_reproduccion_id=".$cita['ClaseReproduccion']['id']."' title='".$cita['ClaseReproduccion']['descripcion']."'>".$cita['ClaseReproduccion']['codigo']."</a></td>";
						echo 	"<td></td>";
						echo "</tr>";
					} 
				?>
					</tbody>
					<tfoot>
						<tr>
							<th style="text-align: center;"><?php echo __("Ver más");?></th>
							<th style="text-align: center;"><?php echo __("Fotos");?></th>
							<th style="text-align: center;"><?php echo __("Especie");?></th>
							<th style="text-align: center;"><?php echo __("Fecha");?></th>
							<th style="text-align: center;"><?php echo __("Lugar");?></th>
							<th style="text-align: center;"><?php echo __("Número de Aves");?></th>
							<th style="text-align: center;"><?php echo __("Observadores");?></th>
							<th style="text-align: center;"><?php echo __("Clase de Reproducción");?></th>
							<th style="text-align: center;"><?php echo __("Importancia");?></th>
						</tr>
					</tfoot>
				</table>
			</div>
			<div id="estadisticas" class="tab-pane fade">
				<div class="row-fluid">
        			<div class="span6">
						 <fieldset>
		        			<legend><?php echo __('Opciones de configuración del gráfico'); ?></legend>
		        			
		        			<form id="frm_estadisticas" action="" method="post" class="form-inline">
		        				
		        				<div id="infoMessagesGrafico" class="alert alert-block alert-info" style="margin-bottom: 20px">
								    <button type="button" class="close" data-dismiss="alert">&times;</button>
								    <p><?php echo __("Puedes modificar las opciones de abajo para configurar el gráfico a tu gusto. No olvides pulsar el botón <b>\"Actualizar gráfico\"</b> para que tus cambios se reflejen en el gráfico.");?></p>
							    </div>
							    
							    <div id="errorMessagesGrafico" class="alert alert-error" style="display: none; padding-left: 14px;">
							    	<h5>Por favor, corrija los errores en el formulario:</h5>
							    	<ul></ul>
							    </div>
							    
		        				<!-- Numero -->
								<div class="control-group" style="margin-bottom: 20px">
									<label class="control-label label-header" for="numeroDe"><?php echo __("Número de")?></label>
									<div class="controls">
										<label class="radio inline"><input name="numeroDe" value="aves" checked="checked" type="radio"> <?php echo __("Aves")?> </label> 
										<label class="radio inline"> <input name="numeroDe" value="citas" type="radio"> <?php echo __("Citas")?> </label> 
									</div>
								</div>

								<!-- Zona geográfica -->
								<div class="control-group" style="margin-bottom: 20px">
									<label class="control-label label-header" for="zonaGeografica"><?php echo __("Zona geográfica")?></label>
									<div>
										<select id="zonaGeografica" name="zonaGeografica" style="margin-right: 20px;">
											<option value="provincia" selected="selected"><?php echo __("Provincia")?></option>
											<option value="municipio"><?php echo __("Municipio")?></option>
											<option value="lugar"><?php echo __("Lugar")?></option>
											<option value="cuadriculaUtm"><?php echo __("Cuadricula UTM")?></option>
										</select>
										<!-- Municipios -->
										<select name="municipios" id="municipios" style="display: none;">
			        					<?php 
			        						foreach ($municipios as $municipio) {
			        							echo "<option value ='".$municipio['Municipio']['id']."'>".$municipio['Municipio']['nombre']."</option>";
			        						}
			        					?>
			        					</select>
			        					<!-- Lugares -->
			        					<select name="lugares" id="lugares" style="display: none;">
				        					<?php 
				        						foreach ($lugares as $lugar) {
				        							echo "<option value ='".$lugar['Lugar']['id']."'>".$lugar['Lugar']['nombre']."</option>";
				        						}
				        					?>
				        				</select>
				        				<!-- Cuadrícula UTM -->
				        				<select name="cuadriculas_utm" id="cuadriculas_utm" style="display: none;">
				        					<?php 
				        						foreach ($cuadriculas_utm as $cuadricula_utm) {
				        							echo "<option value ='".$cuadricula_utm['CuadriculaUtm']['id']."'>".$cuadricula_utm['CuadriculaUtm']['codigo']."</option>";
				        						}
				        					?>
				        				</select>
									</div>
								</div>
								
								<!-- Periodo -->
								<div class="control-group">
									<label class="control-label label-header" for="periodo"><?php echo __("Periodo")?></label>
									<div>
										<select id="periodo" name="periodo" style="margin-right: 20px;">
											<option value="anio" selected="selected"><?php echo __("Año")?></option>
											<option value="anios"><?php echo __("Intervalo de años")?></option>
											<option value="fechas"><?php echo __("Intervalo de fechas")?></option>
										</select>
										<!-- Año -->
										<select name="anio" id="anio">
			        					<?php 
			        						foreach ($anios as $anio) {
			        							echo "<option value ='".$anio[0]['anio']."'>".$anio[0]['anio']."</option>";
			        						}
			        					?>
			        					</select>
			        					<!-- Intervalo años -->
			        					<div id="intervaloAnios" style="display: none;">
			        						<label class="add-on"  for="anioDesde"><?php echo __("Desde")?></label>
				        					<select name="anioDesde" id="anioDesde" class="anioDesdeMenorAnioHasta">
				        					<?php 
				        						foreach ($anios as $anio) {
				        							echo "<option value ='".$anio[0]['anio']."'>".$anio[0]['anio']."</option>";
				        						}
				        					?>
				        					</select>
				        					<label class="add-on" for="anioHasta" style="margin-left: 20px;"><?php echo __("Hasta")?></label>
				        					<select name="anioHasta" id="anioHasta" class="anioHastaMayorAnioDesde">
				        					<?php 
				        						foreach ($anios as $anio) {
				        							echo "<option value ='".$anio[0]['anio']."'>".$anio[0]['anio']."</option>";
				        						}
				        					?>
				        					</select>
			        					</div>
			        					<!-- Intervalo fechas -->
			        					<div id="intervaloFechas" style="display: none;">
			        						<div  class="input-append">
				        						<input type="text" id="fechaDesde" name="fechaDesde" size="10" class="date-picker" style="width: auto;" placeholder="Desde"/>
			        							<label for="fechaDesde" class="add-on" style="margin-right: 20px;"><i class="icon-calendar"></i></label>
			        						</div>
			        						<div  class="input-append">
			        							<input type="text" id="fechaHasta" name="fechaHasta" size="10" class="date-picker" style="width: auto;" placeholder="Hasta"/>
			        							<label for="fechaHasta" class="add-on" style="margin-right: 20px;"><i class="icon-calendar"></i></label>
			        						</div>
		        						</div>
									</div>
								</div>
								<div style="padding: 20px; text-align: center;">
					        		<input type="submit" id="btn_actualizar_grafico" value="<?php echo __("Actualizar gráfico");?>" class="btn btn-success"/>
					        	</div>
			        		</form>
		        		</fieldset>
		        	</div>
		        	<div class="span6">
			        	<fieldset>
		        			<legend><?php echo __('Gráfico'); ?></legend>
				        	<div id="div_grafico" class="contenedor_gris">
				        		<!-- Aqui va el gráfico generado dinamicamente -->
				        	</div>
				        </fieldset>
				    </div>
		        </div>
			</div>
			<div id="mapa_distribucion" class="tab-pane fade">
				<div class="row-fluid">
        			<div class="span6">
						 <fieldset>
		        			<legend><?php echo __('Opciones de configuración del mapa'); ?></legend>
		        			
		        			<div class="alert alert-block alert-info" style="margin-bottom: 20px">
							    <button type="button" class="close" data-dismiss="alert">&times;</button>
							    <p><?php echo __("Puedes modificar las opciones de abajo para configurar el mapa a tu gusto. No olvides pulsar el botón <b>\"Actualizar mapa\"</b> para que tus cambios se reflejen en el mapa.");?></p>
						    </div>
		        			
		        			<form id="frm_mapa_distribucion" action="" method="post">
		        			
		        				<?php echo $this->Session->flash('mensajesMapaContainer');?>
		        			
		        				<!-- División geográfica -->
		        				<div class="control-group" style="margin-bottom: 20px">
									<label class="control-label label-header" for="divisionGeografica"><?php echo __("División geográfica")?></label>
									<div class="input-append">
										<select id="divisionGeografica" name="divisionGeografica">
											<option value="porUtm" selected="selected"><?php echo __("Cuadrículas UTM")?></option>
											<option value="porMunicipio"><?php echo __("Municipios")?></option>
										</select>
									</div>
								</div>
								
								<!-- Tipo distribución -->
								<div class="control-group" style="margin-bottom: 20px">
									<label class="control-label label-header" for="tipoDistribucion"><?php echo __("Tipo de distribución")?></label>
									<div class="input-append">
										<select id="tipoDistribucion" name="tipoDistribucion">
											<option value="geografica" selected="selected"><?php echo __("Geográfica")?></option>
											<option value="cuantitativa"><?php echo __("Cuantitativa")?></option>
											<option value="categoriaReproduccion"><?php echo __("Categoría de reproducción")?></option>
										</select>
									</div>
								</div>
		        				<div style="padding: 20px; text-align: center;">
					        		<button id="btn_actualizar_mapa" class="btn btn-success" type="button"><?php echo __("Actualizar mapa");?></button>
					        	</div>
							</form>
						</fieldset>
					</div>
					<div class="span6">
			        	<fieldset>
		        			<legend><?php echo __('Mapa'); ?></legend>
				        	<div id="div_mapa" class="contenedor_gris">
				        		<img alt="Mapa de los municipios de Albacete" src="/aoa/app/webroot/img/mapas/municipiosAB.jpg" width="100%"/>
				        	</div>
				        </fieldset>
				    </div>
				</div>
			</div>
		</div>
    	<br>
	</fieldset>
</div>

 <script type="text/javascript">

<?php
	if(isset($especie['Fotos']) && count($especie['Fotos']) > 0) {
		echo "Galleria.run('#galleria');";
	}
?>
	
</script>


<!-- Pie -->
<?php 
	$this->start('pie');		
	echo $this->element('/pie');
	$this->end(); 
?>

<!-- Popup Login -->
<?php 
	$this->start('popup_login');		
	echo $this->element('/popup_login');
	$this->end(); 
?>	       

<?php echo $this->Js->writeBuffer();?>